<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">添加账户</template>
    <el-form :model="form" ref="conditionsSetForm" :rules="conditionsSetRule">
      <el-form-item prop="users">
        <el-col >
          <el-input type="textarea" v-model="form.users" placeholder="多个账户请用,号隔开"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item v-if="userList.length > 0" :label="title">
        <span class="user" v-for="(item) in userList">{{item}}</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'conditionsSetForm'})" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

  import {form} from '@/build'
  import {validateUser,accountAdd} from '@/services/api/withdraw';
  export default {
    name: "batch-user-dialog",
    mixins: [form],
    props: ['value','rowData'],
    data() {
      return {
        form: {
          users:''
        },
        title:'',
        userList:[],
        conditionsSetRule: {
          users: [
            {required: true, message: '用户名不能为空', trigger: 'blur'},
          ]
        },
      }
    },
    mounted() {
      this.bindSave(validateUser, 'saveForm', 'form', {
        callback:([result, data],
            {
              successMessage = '',
              errorMessage = ``,
              afterSuccess
            }
        )=> {
        if (result) {
          if (afterSuccess) {
            afterSuccess([result, data]);
          }
        }
      },
        afterSuccess: (data) => {
          if(data[1].errorUser){
            this.userList=data[1].errorUser
            this.title = '检索到不存在的账户名：'
            return
          }
          if(data[1].exitAccount){
            this.userList=data[1].exitAccount
            this.title = '检索到已存在的账户名：'
            return
          }
          this.doSave({action: '_saveForm'})
        }
      });
      this.bindSave(accountAdd, '_saveForm', 'form', {
        afterSuccess: (data) => {
          this.cancel()
          this.$emit('useradd',data[1])
          this.$parent.openDialog({props:{idsArr:this.formatArr(data[1]),conditionList:this.rowData},dialogName: 'setting-user-dialog'})
        }
      });
    },
    methods: {
      cancel() {
        this.$emit('input', false);
      },
      formatArr(arr){
        return arr.map(item => {
          return {
            value:item.id,
            title:item.userName,
          }
        })
      }
    },

  }
</script>

<style lang="scss" scoped>
  .user{
    color: red;
    display: inline-block;
    min-width: 60px;
    text-align: center;
    text-decoration: underline;
  }
</style>
